<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>
            <input type="text" :value="message" @input="message=$event.target.value">
            <input type="text" :value="message" @input="($event)=>{message=$event.target.value}">
        </p>
        <p>message:{{message}}</p>
        <p><button @click="message='hello'">修改message</button></p>
        <hr>

        <p> 
            <!-- input:text textarea 会通过v-mode将value和数据进行双向绑定 -->
            <input type="text" v-model="msg">
        </p>
        <p>msg:{{msg}}</p>
        <p><button @click="msg='world'">修改msg</button></p>

    </div>

</body>
<script>

    // v-model 双向数据绑定  => a. 数据发生变化,会更新视图  b. 修改视图中的内容 数据也会更新
    // 1. 将data中的数据message和input框中的value绑定, 数据发生变化,会更新视图
    // 2. 监听input内容改变, 当input框内容发生改变时  将对应的value值赋值给message  => 修改视图中的内容 数据也会更新
    var vm = new Vue({
        el:"#app",
        data:{
            message:"",
            msg:"",
        }
    });

    

</script>
</html>